<template>
  <div class="me-container">
    <div class="content-bg">
      <div class="title">政务·城市内涝治理</div>
      <div class="user">
        <van-image width="64px" height="64px" fit="cover" round :src="userInfo.avatar" />
        <div class="text">
          <div class="t1">{{ userInfo.name }}</div>
          <div class="t2">你好！</div>
        </div>
      </div>
      <div v-if="userInfo.countyCode == '500000'" style="text-align: left; margin-left: 10px; margin-top: 10px">
        <van-button plain type="primary" @click="goStatisticInfo">统计信息</van-button>
      </div>
      <div>
        <van-button
          style="margin-top: 30px; width: 100%"
          plain
          type="primary"
          @click="logout"
          >退出登录</van-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { getUserInfo } from "@/utils/userInfo.js";
import { onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const userInfo = getUserInfo();

const goStatisticInfo = () => {
  router.push("/statisticInfo");
};

const logout = () => {
  localStorage.removeItem("token");
  router.push("/login");
};
</script>

<style lang="less" scoped>
.me-container {
  height: 100vh;
  .content-bg {
    height: 25%;
    background: #007fff;
    font-family: PingFang TC, PingFang TC;
    font-weight: 600;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    // padding-top: 54px;
    padding-top: 10px;

    .user {
      text-align: left;
      margin-top: 25px;
      margin-left: 15px;
      display: flex;
      .text {
        margin-left: 12px;
        .t1 {
          margin-top: 5px;
        }
        .t2 {
          font-weight: 400;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
